<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>机器人报名</title>
	<script src="js/mui.min.js"></script>
	<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<header  class="mui-bar mui-bar-nav">
	<a id="back"  class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">报名队伍</h1>
</header>
<div class="mui-content">
	<form id="teamInfo" class="mui-input-group">
		<div class="mui-input-row">
			<label>分类</label>
			<select name="group_type">
			<option value="">请选择</option>
			</select>
		</div>
		<div class="mui-input-row">
			<label>组别</label>
			<select name="group_class">
			<option value="">请选择</option>
			</select>
		</div>
		<div class="mui-input-row">
			<label>队名</label>
			<input  name="teamName" type="text" class="mui-input-clear mui-input" placeholder="请输入队名">

		</div>
		<div class="mui-card-content-inner" style="font-size: 12px;color: #fb6f73;">
			代表队名称不能含有阿拉伯数字，如：领越科教1队，正确的格式为：领越科教一队
		</div>
		<div class="team-member-list">
			<ul class="mui-table-view teamMember">
				<li class="mui-table-view-divider">队员1 <span class="mui-badge mui-badge-danger mui-pull-right member-delete" style="margin-right: 10px">删除</span></li>
				<li class="mui-input-row">
					<label>姓名</label>
					<input name="name"  type="text" class="mui-input-clear mui-input" placeholder="请输入姓名">
				</li>
				<li class="mui-input-row">
					<label>性别</label>
					<select name="sex" >
						<option value="">请选择</option>
						<option value="1">男</option>
						<option value="0">女</option>
					</select>
				</li>
				<li class="mui-input-row">
					<label>身份证号</label>
					<input name="idCard" type="text" class="mui-input-clear mui-input" placeholder="请输入身份证号">
				</li>
				<li class="mui-input-row">
					<label>队服尺码</label>
					<select name="size">
						<option value="">请选择</option>
						<option value="0">S（140-155）</option>
						<option value="1">M（155-170）</option>
						<option value="3">XL（170-185）</option>
						<option value="4">XXXL（185以上）</option>
					</select>
				</li>
				<li class="mui-input-row">
					<label>所属学校</label>
					<input name="school" type="text" class="mui-input-clear mui-input" placeholder="请输入学校全称">
				</li>
			</ul>
			<div class="mui-content-padded" >
				<button id="addTeamMember" type="button" class="mui-btn mui-btn-success mui-btn-block" style="padding: 6px 12px;">添加新队员</button>
			 </div>
		</div>
		<div class="team-teacher-list">
			<ul class="mui-table-view teamTeacher">
				<li class="mui-table-view-divider">辅导老师1 <span class="mui-badge mui-badge-danger mui-pull-right teacher-delete" style="margin-right: 10px">删除</span></li>
				<li class="mui-input-row">
					<label>姓名</label>
					<input name="name" type="text" class="mui-input-clear mui-input" placeholder="请输入姓名">
				</li>
				<li class="mui-input-row">
					<label>电话</label>
					<input name="phone" type="text" class="mui-input-clear mui-input" placeholder="请输入电话">
				</li>
			</ul>
			<div class="mui-content-padded" >
				<button id="addTeamTeacher" type="button" class="mui-btn mui-btn-success mui-btn-block" style="padding: 6px 12px;">添加新辅导老师</button>
			</div>
		</div>

		<input type="hidden" name="teamId">
		<div class="mui-content-padded" style="padding-bottom: 30px;">
			<button id="subTeam" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 6px 12px;">确认</button>
		</div>
	</form>

</div>
<script src="js/mui.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">

	mui.ready(function(){
		var numberMember=1;//存储可添加队员数量
		//获取分类信息
		$.ajax({
		       type: "post",
		       url: "../team/front/getProjectList",
		       dataType: "json",
		     async:false,
		       success: function(data){
				 console.log(data);
				 $("select[name=group_type]").empty();
				 var html='<option value="">请选择</option>';
				 $.each(data.data,function(i,e){
				 	html+='<option value='+e.id+' data-max-member='+e.teamMemberCount+'>'+e.name+'</option>';
				 })
				 $("select[name=group_type]").html(html);
		               },
		    error:function(){
		    	mui.toast('获取队伍信息出现异常，请联系管理员',{ duration:'2000', type:'div' });
		    }
		   });
		//获取组别信息
		$("body").on("change","select[name=group_type]",function (e) {
			numberMember=$(this).find("option:selected").attr("data-max-member");
			$.ajax({
				type: "post",
				url: "../team/front/getProjectClassList",
				data:{"projectId":$("select[name=group_type]").val()},
				dataType: "json",
				async:false,
				success: function(data){
					console.log(data);
					$("select[name=group_class]").empty();
					var html='<option value="">请选择</option>';
					$.each(data.data,function(i,e){
						html+='<option value='+e.projectClassEnum+'>'+e.name+'</option>';
					});
					$("select[name=group_class]").html(html);
				},
				error:function(){
					mui.toast('获取队伍信息出现异常，请联系管理员',{ duration:'2000', type:'div' });
				}
			});
		});


		//提交新增信息
		mui(".mui-content-padded").on('tap','#subTeam',function(){
			var that=this;
			mui(this).button('loading');
			var teamMember=[];
			$.each($(".teamMember"),function (i,e) {
				var obj={};
				if($(this).find("input[name=name]").val()!=""){
					obj["name"]=$(this).find("input[name=name]").val();
					obj["sex"]=$(this).find("select[name=sex]").val();
					obj["idCard"]=$(this).find("input[name=idCard]").val();
					obj["size"]=$(this).find("select[name=size]").val();
					obj["school"]=$(this).find("input[name=school]").val();
					teamMember.push(obj);
				}
			});
			var teamTeacher=[];
			$.each($(".teamTeacher"),function (i,e) {
				var obj={};
				if($(this).find("input[name=name]").val()!="") {
					obj["name"] = $(this).find("input[name=name]").val();
					obj["phone"] = $(this).find("input[name=phone]").val();
					teamTeacher.push(obj);
				}
			});
			var editTeamRequestDto ={
				"project_id":$("select[name=group_type]").val(),
				"projectClassEnum":$("select[name=group_class]").val(),
				"teamName":$("input[name=teamName]").val(),
				"members":teamMember,
				"leaders":teamTeacher
			};
			// console.log(editTeamRequestDto);
			// console.log(JSON.stringify(editTeamRequestDto));
			$.ajax({
				type: "post",
				contentType:"application/json",
				url: "../team/front/addTeam",
				data: JSON.stringify(editTeamRequestDto),
				dataType: "json",
				success: function(data){
					if(data.success){
						mui.alert("添加成功","提示",function(){
							window.location.reload();
						});
					}else{
						mui.toast(data.message,{ duration:'2000', type:'div' });
					}
					mui(that).button('reset');
				},
				error:function(){
					mui.toast('修改队伍信息出现异常，请联系管理员',{ duration:'2000', type:'div' });
					mui(that).button('reset');
				}
			});
		});
		//添加新队员操作
		mui(".team-member-list").on('click','#addTeamMember',function(){
			var html='<ul class="mui-table-view teamMember">' +
					'            <li class="mui-table-view-divider">队员'+($(".teamMember").length+1)+'<span class="mui-badge mui-badge-danger mui-pull-right member-delete" style="margin-right: 10px">删除</span></li>' +
					'            <li class="mui-input-row">' +
					'            <label>姓名</label>' +
					'<input name="name"  type="text" class="mui-input-clear mui-input" placeholder="请输入姓名">' +
					'            </li>' +
					'            <li class="mui-input-row">' +
					'            <label>性别</label>' +
					'<select name="sex" >' +
					'<option value="">请选择</option>' +
					'<option value="1">男</option>' +
					'<option value="0">女</option>' +
					'</select>' +
					'            </li>' +
					'            <li class="mui-input-row">' +
					'            <label>身份证号</label>' +
					'<input name="idCard" type="text" class="mui-input-clear mui-input" placeholder="请输入身份证号">' +
					'            </li>' +
					'            <li class="mui-input-row">' +
					'            <label>队服尺码</label>' +
					'<select name="size">' +
					'<option value="">请选择</option>' +
					'<option value="0">S（140-155）</option>' +
					'<option value="1">M（155-170）</option>' +
					'<option value="3">XL（170-185）</option>' +
					'<option value="4">XXXL（185以上）</option>' +
					'</select>' +
					'           </li>' +
					'           <li class="mui-input-row">' +
					'            <label>所属学校</label>' +
					'<input name="school" type="text" class="mui-input-clear mui-input" placeholder="请输入学校全称">' +
					'           </li>' +
					'        </ul>';
			if($(".teamMember").length<numberMember){
					$(".team-member-list").find(".teamMember:last").append(html);
			}else{
				mui.toast('已到最大队员数量',{ duration:'2000', type:'div' });
				$(this).parent().remove();
			}
		});
		//添加辅导老师操作
		mui(".team-teacher-list").on('click','#addTeamTeacher',function(){
			var html='<ul class="mui-table-view teamTeacher">' +
					'            <li class="mui-table-view-divider">辅导老师'+($(".teamTeacher").length+1)+'<span class="mui-badge mui-badge-danger mui-pull-right teacher-delete" style="margin-right: 10px">删除</span></li>' +
					'            <li class="mui-input-row">' +
					'            <label>姓名</label>' +
					'<input name="name" type="text" class="mui-input-clear mui-input"  placeholder="请输入姓名">' +
					'           </li>' +
					'            <li class="mui-input-row">' +
					'            <label>电话</label>' +
					'<input name="phone" type="text" class="mui-input-clear mui-input" placeholder="请输入电话1">' +
					'           </li>' +
					'        </ul>';
			if($(".teamTeacher").length<2){
				$(".team-teacher-list").find(".teamTeacher:last").append(html);
			}else{
				mui.toast('已到最大辅导老师数量',{ duration:'2000', type:'div' });
				$(this).parent().remove();
			}
		});
		mui(".team-member-list").on('click','.member-delete',function(){
			var that = this;
			var btnArray = ['否', '是'];
			mui.confirm('是否确认删除？', '温馨提示', btnArray, function(e) {
				if (e.index == 1&&$(".teamMember").length!=1) {
					$(that).parent().parent().remove();
				}else{
					mui.toast('至少保留一位队员，不可被删除',{ duration:'2000', type:'div' });
				}
			});

		});
		mui(".team-teacher-list").on('click','.teacher-delete',function(){
			var that = this;
			var btnArray = ['否', '是'];
			mui.confirm('是否确认删除？', '温馨提示', btnArray, function(e) {
				if (e.index == 1&&$(".teamTeacher").length!=1) {
					if($(that).parent().parent().find("input[name=id]")){
						$(that).parent().parent().remove();
					}
				}else{
					mui.toast('至少保留一位辅导老师，不可被删除',{ duration:'2000', type:'div' });
				}
			});
		});
		$("#back").click(function(){
			mui.openWindow({
				url:'index.html'
			});
		})
	});
</script>
</body>
</html>
